<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button title="这是一个按钮" name="btn" class="active" data-index="0" style="color: red;background-color: yellow;">按钮</button>
  <script>
    document.title = 'vue'
    /*
    html 元素都是通过HTMLElement类型表示，包含其直接实例和间接实例，
    另外HTMLElement直接继承了Element并增加了一些属性，每一个属性都对应一下属性之一
    title
    id
    lang
    dir
    className
    取得属性 getAttribute setAttribute removeAttribute
    */

    const button = document.getElementsByTagName('button')[0]
    // console.log(button.getAttribute('title'))
    // console.log(button.dataset.index)
    // console.log(button.style)
    // console.log(button.getAttribute('style'))
    // console.log(button.attributes) // 返回元素有哪些属性


    // console.log(button.attributes.getNamedItem('name').nodeValue)
    // console.log(button.attributes['name'].nodeValue)
    // 设置元素的属性值

    // removeNamedItem()
    // setNamedItem() 给元素添加新属性
    button.attributes.getNamedItem('name').nodeValue = 'will'


    function outputAttributes(element) {
      let paris = []

      for(let i = 0,len = element.attributes; i < len.length; i++) {
        paris.push(`${len[i].nodeName}=${len[i].nodeValue}`)
      }
      return paris.join('')
    }
    console.log(outputAttributes(button))
  </script>
</body>
</html>